<div class="picker-container">
    <div class="header">
        <span>Pick date & time</span>
    </div>
    <div class="p-content">
        <div class="d-picker">
            <mat-calendar [(selected)]="selectedDate" 
                (selectedChange)="selectedChange($event)" 
                (yearSelected)="yearSelected()" 
                [minDate]="minimunDate" 
                (monthSelected)="monthSelected()" 
                (_userSelection)="userSelection()" 
                (cdkAutofill)="cdkAutofill()">
            </mat-calendar>
        </div>
        <div class="p-sidebar">
           <form [formGroup]="datePickerFrom">
                <input class="p-input" type="text" formControlName="date" [value]="dateString">
            
                <input class="p-input" type="text" formControlName="time" [value]="timeString">
           </form>
        </div>
    </div>
    <div style="display: flex; justify-content: flex-end;">
        <button mat-button [mat-dialog-close]>Cancel</button>
        <button (click)="submitDate()" mat-flat-button style="color: #fff; background-color: #297be6; margin-left: 8px;">&nbsp;&nbsp;Save&nbsp;&nbsp;</button>
    </div>
</div>